<template>
  <div id="app">
  <transition :name="aniType">
    <router-view></router-view>
  </transition>
  </div>
 
  
</template>

<script>
export default {
 data() {
    return {
        aniType: ""
    }
  },
   watch: {
      $route(nv, ov) {
       
          var nLen = nv.path.split("/").length - 1;
          var oLen = ov.path.split("/").length - 1;
          if (nLen > oLen) {
               console.log(1112)
              this.aniType = "pagein";
              console.log(this.aniType)
          } else if (nLen < oLen) {
              this.aniType = "pageout";
          } else {
              this.aniType = "";
          }
          
     }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  z-index:-1;
}
 .pagein-enter {
        transform: translate(100%, 0);
        opacity:1;
    }

  .pagein-enter-active,
  .pagein-leave-active {
      transition: all 0.7s;
      position: absolute;
      width: 100%;
      height:100%;
  }

  .pagein-enter-to,
  .pagein-leave {
      transform: translate(0, 0);
  }

  .pagein-leave-to {
      transform: translate(-30%, 0);
      opacity:0
  }


  /*页面后退动画*/

  .pageout-leave,
  .pageout-enter-to {
      transform: translate(0, 0);
  }

  .pageout-leave-active,
  .pageout-enter-active {
      transition: all 0.7s;
      position: absolute;
      width: 100%;
      height:100%;
  }

  .pageout-leave-to {
      transform: translate(100%, 0);
      opacity:1;

  }

  .pageout-enter {
      transform: translate(-30%, 0);
      opacity:1
  }
</style>
